<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>机构通知</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="./student/css/head.css">
	<link rel="stylesheet" href="css/school_notice.css" />

	<style scoped>
		body {
			margin: 0;
			padding: 0;
		}

		.notice_info {
			padding: 10px;
			box-sizing: border-box;
		}

		.notice_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.notice_title {
			font-size: 14px;
			padding: 10px 0;
			color: #686868;
		}

		.notice_footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
			border-top: 2px solid #eee;
		}

		.del {
			display: flex;
			align-items: center;
		}

		.list_box {
			padding-top: 40px;
			overflow: auto;
			box-sizing: border-box;
			background-image: url('image/img/my_back2.jpg');
			background-size: 100% 100%;
		}

		.list_box .header-after {
			margin: 15px 5%;
		}
	</style>
</head>

<body>
	<div id="vue-root">
		<div class="contain">
			<div class="header">
				<div class="header_title">机构通知</div>
				<a onclick="history.back()">
					<img src="image/return.png" alt="" class="return">
				</a>
				<!-- <a href="teacher/school_notice_item.html" v-if="isPresident">
					<img src="image/add.png" class="heder-add" />
				</a> -->
			</div>
		</div>
		<div ref="list_box" class="list_box" :style="{'height':heights+'px'}" @scroll="scroll">
			<!-- 这里的注释接完接口就删掉 -->
			<!-- <a v-for="notice in notices" :key="notice.id" :href="'school_notice_details.html?id='+notice.id">
				<div class="notice_info header-after">
					<div class="info_foot" style="border-bottom: 1px solid silver;">
						<p class="publisher-name">发布人：{{notice.publisher}}</p>
						<img v-if="isPresident" @click="del(notice.id)" src="image/delete.png" class="del">
						<p class="release-time" v-text="format(notice.time)"></p>
					</div>
					<div class="info_header">
						<div class="title" v-text="notice.title"></div>
					</div>
					<div class="img_box" v-if="notice.pic">
						<img class="notice_img" :src="getImg(notice.pic)" />
					</div>
					<div class="info_center" v-text="getText(notice.content)"></div>
				</div>
			</a> -->
			<div v-for="notice in notices" :key="notice.id" class="notice_info header-after">
				<div class="notice_head">
					<img style="width: 25px;" src="./image/img/gonggao_icon.png">
					<span style="font-size: 11px;color:#999">{{ format(notice.time) }}</span>
				</div>
				<div class="notice_title">
					{{ notice.title }}
				</div>
				<div class="notice_footer">
					<div class="chakanBtn" @click="goUrl('school_notice_details.html?id=' + notice.id)">
						<img style="width: 14px;" src="./image/img/chakan_icon.png">
						<span style="font-size: 12px;color: #686868;">查看</span>
					</div>
					<div class="del" v-if="isPresident" @click="del(notice.id)">
						<img style="width: 14px;margin-right: 6px;" src="./image/img/del.png">
						<span style="font-size: 12px;color:#fd3838;">删除</span>
					</div>
				</div>
			</div>
			<div style="text-align: center;height: 30px;line-height: 30px;color: #a7a7a7;padding-bottom: 10px;" v-if="isall">
				已加载全部
			</div>
			<div class="mask_layer">

			</div>
		</div>
	</div>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="../js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				notices: [],
				heights: '',//列表高度
				schoolId: getPerson().schoolId,
				isPresident: isTeacher() && getTeacher().president,
				page: 2,
				isall: false,//是否加载全部
			},
			created: function () {
				this.heights = document.body.clientHeight
				this.getData();
			},
			methods: {
				goUrl: function(url){
					window.location=url
				},
				// 底部刷新
				scroll(e) {
					var scrollTop = this.$refs.list_box.scrollTop;//滚出的高度
					var scrollHeight = this.$refs.list_box.scrollHeight;//内容的高度

					var url = isTeacher() ? '/t' : '/s';
					if (scrollTop + this.heights >= scrollHeight) {
						// axios.get(url + '/notice',{params:{pageNum:this.page,pageSize:10}}).then(function (res) {
						// 	var arr=res.data.list
						// 	if(arr.length){
						// 		this.page+=1;
						// 		for(let i=0;i<arr.length;i++){
						// 			this.notices.push(arr[i])
						// 		}
						// 	}else{
						// 		this.isall=true
						// 	}
						// }.bind(this));
					}

				},
				getData: function () {
					var url = isTeacher() ? '/t' : '/s';
					axios.get(url + '/notice', { params: { pageNum: 1, pageSize: 10 } }).then(function (res) {
						// var arr=res.data.list
						// if(arr.length){
						// 	for(let i=0;i<arr.length;i++){
						// 		this.notices.push(arr[i])
						// 	}
						// }
						this.notices = res.data
					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + this.schoolId + '/notice/' + pic;
				},
				format: function (time) {
					var s = dayjs(time).format('YYYY-MM-DD')
					if (dayjs().format('YYYY-MM-DD') == s)
						return dayjs(time).format('HH:mm:ss');
					return s;
				},
				del: function (id) {
					axios.delete('/t/notice/' + id).then(function (res) {
						this.getData();
					}.bind(this));
				},
				getText: function (html) {
					var b = document.createElement('div');
					b.innerHTML = html;
					var a = b.innerText;
					b.remove();
					if (a && a.length > 150)
						a = a.substr(0, 150) + '...';
					return a;
				},
			}
		});

		updateUnread('notice');
	</script>

</body>

</html>